<!DOCTYPE html>
<html ng-app="chargingApp">

<head>
	<meta charset="utf-8" />
	<title></title>

	<link rel="stylesheet" href="css/page-styles.css" />
	<link rel="stylesheet" href="css/style.css" />
	<style type="text/css">
/*		.logo img{
			width: 250px;
			height: 270px;
		}*/
	</style>
</head>

<body ng-controller="chargingController">
	<div id="DCpile">
		<div id="top">
			<div class="dz-number">
				<div class="num">4</div>
				<span>#</span>
			</div>
			<div class="dz-msg">
				<div class="dz-type">直流桩</div>
				<ul>
					<li>
						380<span>V</span>
					</li>
					<li>
						36<span>kW</span>
					</li>
					<li>
						32<span>A</span>
					</li>
				</ul>
			</div>
			<div class="more-info">
				<ul class="date">
					<li id="date"></li>
					<li id="week"></li>
					<li id="now"></li>
				</ul>
				<div class="weather">

					<ul>
						<li>
							<span id="weather" ng-bind="chargingObj.weather"></span>
						</li>
						<li>
							<span id="city_temperature" ng-bind="chargingObj.city_temperature"></span>
							℃
						</li>
					</ul>
					<div class="border">
						<ul class="Airquality" style="background:#84df33" 
						ng-if="chargingObj.pm25 <= 35">
							<li>PM2.5</li>
							<li> <em id="pm25" ng-bind="chargingObj.pm25"></em> 
							<em id="pm_level" ng-bind="chargingObj.pm_level"></em>
							</li>
						</ul>
						<ul class="Airquality" style="background:#f09e4e" 
						ng-if="chargingObj.pm25 > 35 && chargingObj.pm25 <= 53">
							<li>PM2.5</li>
							<li> <em id="pm25" ng-bind="chargingObj.pm25"></em> 
							<em id="pm_level" ng-bind="chargingObj.pm_level"></em>
							</li>
						</ul>
						<ul class="Airquality" style="background:#f17c73"
						ng-if="chargingObj.pm25 > 54 && chargingObj.pm25 <= 70">
							<li>PM2.5</li>
							<li> <em id="pm25" ng-bind="chargingObj.pm25"></em> 
							<em id="pm_level" ng-bind="chargingObj.pm_level"></em>
							</li>
						</ul>
						<ul class="Airquality" style="background:#ce30ff" 
						ng-if="chargingObj.pm25 > 70">
							<li>PM2.5</li>
							<li> <em id="pm25" ng-bind="chargingObj.pm25"></em> 
							<em id="pm_level" ng-bind="chargingObj.pm_level"></em>
							</li>
						</ul>
					</div>

				</div>

				<div class="logo">
					<img src="img/logo.png" />
				</div>
			</div>
		</div>
		<div id="container">
			<div ng-repeat="state in chargingObj.stateList track by $index" 
			ng-class="{chargeA:state.charge_status==2,chargeB:state.charge_status!=2}">
				<div class="name" ng-if="state.charge_status==0" 
				style="background-image:'../img/trianglegreen.png'">
					{{state.port_no | getValueInStaticFilter : 'chargePortArray'}}枪口
				</div>
				<div class="name" ng-if="state.charge_status==1" 
				style="background-image:'../img/triangle.png'">
					{{state.port_no | getValueInStaticFilter : 'chargePortArray'}}枪口
				</div>
				<div class="name" ng-if="state.charge_status==2" 
				style="background-image:'../img/triangleblue.png'">
					{{state.port_no | getValueInStaticFilter : 'chargePortArray'}}枪口
				</div>
				<div id="port2">
					<div class="picA" ng-if="state.charge_status==2" style="padding-top: 286px;">
						<div class="bigcircle">
							<div id="circle{{state.port_no}}" class="second circle second anim-flip show"> 
							<strong></strong>
								<img class="pic" src="img/circle1.png" />
								<img class="battery" src="img/batteryM1.png" ng-if="!!!state.soc||state==0"/>

								<img class="battery" src="img/batteryM2.png" 
								ng-if="!!state.soc&&state.soc > 0 && state.soc <= 33"/>

								<img class="battery" src="img/batteryM3.png" 
								ng-if="!!state.soc && state.soc>33 && state.soc<=66"/>

								<img class="battery" src="img/batteryM4.png" 
								ng-if="!!state.soc && state.soc > 66"/>
								
							</div>
							<div id="circlehidden{{state.port_no}}" class="circlehidden">
								<strong></strong>
							</div>
						</div>

					</div>
					<div class="chargeingType" ng-if="state.charge_status==2&&!!state.soc">
					用户{{state.cardId}}充电中...
					</div>
					<div class="chargeingType" ng-if="state.charge_status==2&&!!!state.soc">
					正在充电...
					</div>
	



					<div class="picB" ng-if="state.charge_status==1">
						<img  src="img/dc-b.png" />
						<img class="userpic" src="img/user.png" />
					</div>
					<div class="picB" ng-if="state.charge_status==0" style="padding-top: 354px;">
						<img src="img/free-1.png" />
					</div>



					
					<div class="chargeingType" ng-if="state.charge_status==1">
						已被用户
						<span id="u_id" ng-bind="state.user_pay_card"></span>
						预约
					</div>
					<div class="chargeingType" ng-if="state.charge_status==0">
						空闲中...
					</div>

					<ul class="currentInfo">
						<li>
							<ul>
								<li>已充电量</li>
								<li>
									<span ng-bind="state.charger_kwh"> </span>
								</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>预计剩余时间</li>
								<li>
									<span ng-bind="state.remaining_time"></span>
									
								</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>电池温度</li>
								<li>
									<span ng-bind="state.battery_temperature"></span>
									
								</li>
							</ul>
						</li>

					</ul>
				</div>

			</div>
		</div>

	</div>

	<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
	<script type="text/javascript" src="js/date.js"></script>
	<script type="text/javascript" src="js/circle-progress.js"></script>
	<script type="text/javascript" src="js/angular.js"></script>
	<script type="text/javascript" src="js/charging_Angular.js"></script>
	<script type="text/javascript" src="js/chargingService.js"></script>

</body>
<script type="text/javascript">
	function formatId(id) {
        return id.replace(/(\d{3})\d{9}(\d{4})/, "$1****$2");
    }
</script>
</html>